<template>
  <div class="wraps">
    <!-- 左上 2025年度研发预算与发生额分析 -->
    <div class="upperleft">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">{{ currentYear }}年度研发预算与发生额分析</span>
        </div>
        <div style="font-size: 16px">
          <YfYs></YfYs>
        </div>
      </el-card>
    </div>

    <!-- 左下 研发活动(材料消耗)实时情况 -->
    <div class="lowerLeft">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">研发活动(材料消耗)实时情况</span>
        </div>
        <div style="font-size: 16px">
          <YfHd></YfHd>
        </div>
      </el-card>
    </div>

    <!-- 右上 2025单位数据统计 -->
    <div class="upperRight">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh">
        <div slot="header" class="clearfix">
          <el-select v-model="selectedYear" placeholder="请选择年份" @change="loadData">
            <el-option
              v-for="year in years"
              :key="year"
              :label="year"
              :value="year">
            </el-option>
          </el-select>
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">单位数据统计</span>

        </div>
        <SjTj :year="selectedYear"/>
      </el-card>
    </div>

    <!-- 右下 研发项目材料费统计 -->
    <div class="lowerRight">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">研发项目材料费统计</span>
        </div>
        <YfXm/>
      </el-card>
    </div>
  </div>
</template>

<script>
import SjTj from "@/views/fztz/fztzkb/SjTj";
import YfHd from "@/views/fztz/fztzkb/YfHd";
import YfXm from "@/views/fztz/fztzkb/YfXm";
import YfYs from "@/views/fztz/fztzkb/YfYs";
export default {
  name: 'Zscqkb',
  components: {SjTj, YfHd, YfXm, YfYs},
  data() {
    return {
      selectedYear: '2025', // 默认选择2025年
      years: ['2023', '2024', '2025', '2026', '2027'] // 静态年份列表，也可以是动态获取的
    }
  },
  computed: {
    loadData() {
      // 根据selectedYear加载对应的数据
      // 这里可以是AJAX请求或其他异步操作
      console.log('Loading data for year:', this.selectedYear);
    },
    currentYear() {
      return new Date().getFullYear();
    },
  },
  watch: {
    selectedYear(newVal) {
      // 当selectedYear改变时，执行某些操作，比如重新加载数据
      this.loadData();
    }
  },
  created() {
    // 组件创建时首次加载默认年份的数据
    this.loadData();
  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 48%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 48%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}


/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 50%; /* 距离左侧1% */
  width: 50%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 50%; /* 距离左侧1% */
  width: 50%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* header 头部背景 */
/deep/ .el-card__header {
  padding: 6px 15px 7px;
  min-height: 30px;
  background-color: #D9EDF7;
}

/deep/ .el-card__body {
  padding: 2px 20px 20px 20px;
  height: 40vh;
}

.lowerMiddle /deep/ .el-card__body{
  padding: 20px;
  box-sizing: border-box;
  height: calc(100% - 40px) !important;
}
.lowerMiddle /deep/ .el-carousel{
  height: 100%;
}
.lowerMiddle /deep/ .el-carousel__container{
  height: 100% !important;
}
.lowerMiddle /deep/ .el-carousel__item{
  height: 100% !important;
}
.lowerMiddle /deep/ .img{
  width: 100%;
  height: 100%;
}
</style>

